<template>
    <section>
        <el-col :span="24" class="toolbar">
            <el-form :inline="true">
                <el-form-item>
                    <el-input placeholder="请输入课程名或教师名" v-model="searchData" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-row>
            <el-col :span="6" v-for="(o, index) in courseTeacherList.length" :key="o" :offset="index > 0 ? courseTeacherList.length : 0" style="margin-left: 10px">
                <el-card :body-style="{ width: '500px' }" >
                    <img src="../common/img/book.png" class="image">
                    <div>
                        <span>{{courseTeacherList[index].course.name}}</span>
                        <div class="bottom clearfix">
                            <span class="time">授课老师：{{courseTeacherList[index].teachDetail.user.realname}}</span>
                            <el-button type="text" class="button" @click="GoCourse(courseTeacherList[index].course.id,courseTeacherList[index].course.name)">进入课程</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    export default {
        name: "courses",
        data(){
            return {
                courseTeacherList:[],
                studentInfo:{},
                currentUser:{},
                searchData:"",
                options: [
                    {
                        course:{},
                    },

                ],
            }
        },
        methods:{
            getUserInfo(){
                this.user = JSON.parse(localStorage.getItem("CurrentUser"));
                this.$http.get("/api/studentinfo/findByUserid/"+this.user.id).then((res)=>{
                    this.studentInfo = res.data.data;
                    this.getDataList();
                }).catch((error)=>{
                    console.log(error);
                });
            },
            getDataList(){
                let para = {
                    studentid:this.studentInfo.id,
                    keyword:this.searchData
                };
                this.$http.post("/api/coursestudent/findCoursesByCondition",para).then((res)=>{
                    console.log(res.data.data);
                    this.courseTeacherList = res.data.data;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            GoCourse(num,name){
                this.$router.push({
                    path:'/stuCourseDetail',
                    query:{courseid:num,coursename:name}});
            },
            search(){
                this.getDataList();
            }

        },
        mounted(){
            this.getUserInfo();
        }
    }
</script>

<style scoped>
    @import '../common/css/student/welcome.css';
</style>